import React from 'react';
import ToDoItem from './ToDoItem'

class ToDoList extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
            inputValue: ''
        }
    }

    handleBtnClick() {
        this.setState({
            list: [...this.state.list,this.state.inputValue],
            inputValue: ''
        });
    }

    handleInputValueChange(e) {
        this.setState({
            inputValue: e.target.value
        });
    }

    handleItemClick(index) {
        const list = [...this.state.list]
        list.splice(index,1)
        this.setState({
            list
        })
    }

    handleDelete(index) {
        const list = [...this.state.list]
        list.splice(index,1)
        this.setState({
            list
        })
    }

    render() {

        return (
            <div>
                <div>
                    <input value={this.state.inputValue} onChange={this.handleInputValueChange.bind(this)} />
                    <button onClick = {this.handleBtnClick.bind(this)}>add</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index) => {
                            return <ToDoItem key = {index} delete={this.handleDelete.bind(this)} content={item} index={index}/>
                            // return <li key = {index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default ToDoList;